<template>
  <!-- 递归树形菜单 -->
  <el-menu :router="isRouterMenu" :default-active="activeMenu" class="tree-menu" :collapse="isCollapse">
    <!-- 使用递归组件 -->
    <my-sub-menu v-for="item in menu" :key="item.path" :item="item"></my-sub-menu>
  </el-menu>
</template>

<script setup name="MenuTree">
import { reactive, toRefs, watch } from 'vue'
import { useRoute } from 'vue-router'
import MySubMenu from './sub-menu.vue'

const route = useRoute()

defineProps({
  menu: {
    type: Array,
    default: () => [],
    required: true,
  },
  isCollapse: {
    type: Boolean,
    default: false,
  },
  isRouterMenu: {
    type: Boolean,
    default: true,
  },
})

const data = reactive({
  isCollapse: false,
  activeMenu: '',
})

watch(
  () => route,
  route => {
    data.activeMenu = route.path
  },
  {
    immediate: true,
  },
)

const { activeMenu } = toRefs(data)
</script>

<style lang="scss">
.tree-menu.el-menu {
  border-right: none;
  min-height: 400px;
  height: calc(100% - 120px);
  overflow: auto;
  // margin-top: 50px;
  &:not(.el-menu--collapse) {
    width: 200px; /* px-to-viewport-ignore */
  }
}
</style>
